<template>
    <div class="search"></div>
    <div class="echart">
      <Chart :width=store.echarts24.width :height=store.echarts24.height :options="store.echarts24.options"></Chart>
    </div>
    <div class="table">
      <div class="top">
        <div class="left"> 销售数量：10000， 销售金额：¥ 1,000,000.00</div>
        <div class="right"></div>
      </div>
      <el-table :data="tableData" stripe :border="true" :size="large" :row-style="{height:'50px'}">
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="hao" label="产品编号" />
      <el-table-column prop="num" label="销售销量" />
      <el-table-column prop="jine" label="销售金额" />
      <el-table-column prop="danjia" label="平均单价" />
    </el-table>
  </div>
    <div class="reg">
      <p>Copyright © www.AxureUX.com, All Rights Reserved.</p>
      <p>专业的交互原型素材原创分享平台</p>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue';
  import Chart from '../../components/MyEcharts'
  import { useStore } from '../../store/zsz/index'
  const store = useStore()
  const tableData = [
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  },
  {
    name: '产品名称',
    hao: 'CP001',
    num:10000,
    jine:'￥1000000.00',
    danjia:'￥1000.00',
  }
]
  </script>
  
  <style lang='scss' scoped>
  .search {
    height: 110px;
    background-color: white;
  }
  
  .echart {
    height: 440px;
    background-color: white;
    margin: 14px 0;
  }
  
  .table {
    width: 100%;
    padding: 0px 20px;
    height: 780px;
    background-color: white;
  
    .top {
      height: 80px;
      line-height: 80px;
      color: #666666;
    }
  
    .main {
      height: calc(900px - 80px);
    }
  }
  
  .reg {
    text-align: center;
    color: #cccccc;
    padding-top: 30px;
    margin-top: 20px;
    height: 140px;
    font-size: 14px;
  }
  
  
  
  
  
  
  </style>